<template>
    <div id="tmpl">
        <div class="v3-userinfo-box" :style="{backgroundImage: 'url(' + anchorinfo.anchor_id.aPortrait + '_300x300.jpg' + ')'}">
            <div class="daren">
                <!-- <div class="nick">{{ anchorinfo.anchor_id.aNickname }}</div> -->
                <!-- <div class="fans"><span class="num">{{ anchorinfo.anchor_id.aFans }}</span><br><span>粉丝</span></div> -->
                <!-- <div class="opts"></div> -->
            </div>
        </div>

        <div class="v3-ability-box">

            <div>
                <h4>达人综合能力指数</h4>
                <div class="abilitynum"><span class="num">{{anchorinfo.aNumberCooperative}}</span>分</div>
                <div class="hr"></div>
            </div>
            <div>
                <h4>内容互动数据</h4>
                <div class="next-row next-row-no-wrap abilitydata">
                    <div class="next-col next-col-8">
                        <div class="text-red">{{ anchorinfo.aContentInteracte_Visit }}</div>
                        <div class="text-ifo">图文7日<br>浏览次数</div>
                    </div>
                    <div class="next-col next-col-8">
                        <div class="text-red">{{ anchorinfo.aContentInteracte_View }}</div>
                        <div class="text-ifo">直播7日<br>观看次数</div>
                    </div>
                    <div class="next-col next-col-8">
                        <div class="text-red">{{ anchorinfo.aContentInteracte_Player }}</div>
                        <div class="text-ifo">短视频7日<br>播放次数</div>
                    </div>
                </div>
                <div class="hr"></div>
            </div>
            <div>
                <h4>接单效果数据</h4>
                <div class="next-row next-row-no-wrap abilitydata">
                    <div class="next-col next-col-8">
                        <div class="text-red">{{ anchorinfo.aOrderEffect_Rate }}</div>
                        <div class="text-ifo">接单率</div>
                    </div>
                    <div class="next-col next-col-8">
                        <div class="text-red">{{ anchorinfo.aOrderEffect_ResTime }}</div>
                        <div class="text-ifo">响应时间</div>
                    </div>
                    <div class="next-col next-col-8">
                        <div class="text-red">{{ anchorinfo.aOrderEffect_Complete }}</div>
                        <div class="text-ifo">完成率</div>
                    </div>
                </div>
                <div class="hr"></div>
            </div>
            <div>
                <h4>服务效果数据</h4>
                <div class="next-row next-row-no-wrap abilitydata">
                    <div class="next-col next-col-8">
                        <div class="text-red">{{ anchorinfo.aServiceEffect_ServiceScore }}</div>
                        <div class="text-ifo">服务评分</div>
                    </div>
                    <div class="next-col next-col-8">
                        <div class="text-red">{{ anchorinfo.aServiceEffect_TotalUser }}</div>
                        <div class="text-ifo">累计用户数</div>
                    </div>
                    <div class="next-col next-col-8">
                        <div class="text-red">{{ anchorinfo.aServiceEffect_ServiceNum }}</div>
                        <div class="text-ifo">服务数量</div>
                    </div>
                </div>
                <div class="hr"></div>
            </div>
        </div>

        <div class="intro">
            <div class="next-row intro-row">
                <span class="v3vlabel">服务类型:</span>
                <div class="next-col">{{ anchorinfo.aServiveType}}</div>
            </div>
            <div class="next-row intro-row">
                <span class="v3vlabel">服务领域:</span>
                <div class="next-col">{{ anchorinfo.aVerticalField}}</div>
            </div>
            <div class="next-row intro-row">
                <span class="v3vlabel">自我介绍:</span>
                <div class="last-next-col" v-html="anchorinfo.aIntroduce"></div>
            </div>
        </div>
    </div>
</template>
<script>
import common from '../../kits/common.js';
export default {
    data(){
        return {
            id:0,
            anchorinfo:{},
        }
    },
    created(){
        this.id = this.$route.params.id
        this.getinfo();
    },
    methods:{
        getinfo(){
            var url = common.apidomain + 'api/v1/anchor/' + this.id + '/';
            this.$http.get(url).then(function(response){
                this.anchorinfo = response.data
            })
        },
    },
}
</script>
<style scoped>
.v3-userinfo-box {
    margin: 10px auto;
    
    width: 300px;
    height: 300px;
    border-radius: 5px;
}
.v3-userinfo-box .daren {
    text-align:center;
    margin-top:10px;
}
.v3-userinfo-box .nick {
    font-size: 22px;
    line-height: 30px;
    text-align: center;
    color: #333;
    margin: 0 0 4px;
}
.v3-userinfo-box .fans {
    text-align: center;
}
.v3-userinfo-box .fans .nums {
    color: #FE5C38;
    font-size: 28px;
    line-height: 33px;
}
.v3-ability-box {
    text-align: center;
    padding-top: 1px;
    margin-bottom: 20px;
    padding-bottom: 20px;
    margin:0 auto;
}
.v3-ability-box, .v3-mechanism-box {
    width: 350px;
    background-color: #fff;
    border-radius: 4px;
}
.v3-ability-box .abilitynum {
    font-size: 12px;
    margin-bottom: 10px;
}
.v3-ability-box .abilitynum .num {
    color:#FE5C38;
    font-size: 20px;
}
.v3-ability-box .hr {
    height: 0;
    line-height: 0;
    border-top: 1px solid #eee;
    margin: 10px;
}
.next-row {
    box-sizing: border-box;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
}
.next-row .next-col-8 {
    width: 33.33333%;
    max-width: 33.33333%;
    -moz-flex: 0 0 33.33333%;
    -ms-flex: 0 0 33.33333%;
    flex: 0 0 33.33333%;
}
.v3-ability-box .abilitydata .text-red {
    margin-bottom: 5px;
}
.v3-ability-box .text-red {
    color: #FE5C38;
    font-size:15px;
}
.v3-ability-box .text-ifo {
    color: #999;
    font-size: 10px;
}
.next-col {
    -moz-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    display: inline-block;
    padding: 0 4px;
    width: auto;
}
.v3-ability-box .abilitydata {
    color: #999;
    font-weight: 400;
}
.intro {
    font-size:14px;
    margin:0 auto;
}
.intro .intro-row {
    padding-left: 25px;
    padding-right: 20px;
    margin:0 auto;
}
.intro .intro-row .v3vlabel {
    width:80PX;
    height:20px;
    color: #999;
    padding-right: 5px;
}

</style>


